import { Component } from 'react'

import TodoAdd from './components/TodoAdd'
import TodoList from './components/TodoList'
import TodoFooter from './components/TodoFooter'

// 导入工具类
import utils from './utils'

// 导入todos样式
import './App.css'

// 导入 TodoItem 类型
import { TodoItem } from './todos'

/*
添加任务：

1. 为子组件添加状态和属性及其类型：
   - 状态：文本框的值
   - 属性：回调函数，接收一个 string 类型的参数
2. 通过`受控组件`方式获取到文本框的值
3. 在子组件文本框按下回车键时将数据传递给父组件
4. 父组件接收子组件传递过来的任务名称（文本框的值）
5. 将任务添加到父组件的状态数据中
*/

// App 组件的状态类型
type Todos = {
  todos: TodoItem[],
  checkedAll: boolean
}

const todos: TodoItem[] = [
  {
    id: 1,
    text: '已完成的待办事项',
    done: true,
    edit: false
  },
  {
    id: 2,
    text: '未完成的待办事项',
    done: false,
    edit: false
  },
  {
    id: 3,
    text: '双击可编辑待办事项',
    done: false,
    edit: false
  },
]

class App extends Component<{}, Todos> {
  state: Todos = {
    todos,
    checkedAll: false
  }

  // 新增任务
  addTodo = (text: string) => {
    // console.log('父组件中获取到数据：', text)
    const { todos } = this.state
    const id = todos.length === 0 ? 1 : todos[todos.length - 1].id + 1
    const t_todos = [
      ...todos,
      {
        id,
        text,
        done: false,
        edit: false
      }
    ]
    this.setState({ todos: t_todos })
    // 将数据存储到本地存储中
    utils.setStore('todos', t_todos)
  }

  // 编辑任务
  editTodo = (id: number, text: string) => {
    const { todos } = this.state
    const t_todos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          edit: false,
          text: text
        }
      }
      return todo
    })
    this.setState({ todos: t_todos })
    // 将数据存储到本地存储中
    utils.setStore('todos', t_todos)
  }

  // 删除任务
  deleteTodo = (id: number) => {
    const { todos } = this.state
    const t_todos = todos.filter(todo => todo.id !== id)
    this.setState({ todos: t_todos })
    // 将数据存储到本地存储中
    utils.setStore('todos', t_todos)
  }

  // 清除已完成任务
  clearCompletedTodo = () => {
    const { todos } = this.state
    const t_todos = todos.filter(todo => !todo.done)
    this.setState({ todos: t_todos })
    // 将数据存储到本地存储中
    utils.setStore('todos', t_todos)
  }

  // 切换任务状态
  changeDone = (id: number) => {
    const { todos } = this.state
    const t_todos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          done: !todo.done
        }
      }
      return todo
    })
    // 切换完任务状态 需判断全选状态
    this.setState({ todos: t_todos, checkedAll: t_todos.every(todo => todo.done) })
    // 将数据存储到本地存储中
    utils.setStore('todos', t_todos)
  }

  // 切换编辑状态
  changeEdit = (id: number) => {
    const { todos } = this.state
    const t_todos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          edit: true
        }
      }
      return todo
    })
    this.setState({ todos: t_todos })
    // 将数据存储到本地存储中
    utils.setStore('todos', t_todos)
  }

  // 搜索所有任务
  searchAllTodo = (active: string) => {
    const all_todos: TodoItem[] = utils.getStore('todos')
    const t_todos = all_todos.filter(todo => {
      if (active === '#/') {
        return todo;
      } else if (active === '#/active') {
        return !todo.done;
      } else if (active === '#/completed') {
        return todo.done;
      }
    })
    this.setState({ todos: t_todos })
  }

  // 切换全选状态
  changeCheckedAll = () => {
    const { todos, checkedAll } = this.state
    const t_todos = todos.map(todo => {
      return {
        ...todo,
        done: !checkedAll
      }
    })
    this.setState({ todos: t_todos, checkedAll: !checkedAll })
    // 将数据存储到本地存储中
    utils.setStore('todos', t_todos)
  }

  // 组件挂载完毕后，从本地存储中获取数据
  componentDidMount() {
    // 将数据存储到本地存储中
    utils.setStore('todos', todos)
  }

  render() {
    return (
      <section className="todoapp">
        {/* 添加任务 */}
        <TodoAdd onAddTodo={this.addTodo} />

        <section className="main">
          <input
            id="toggle-all"
            className="toggle-all"
            type="checkbox"
            checked={this.state.checkedAll}
            onChange={this.changeCheckedAll}
          />
          <label htmlFor="toggle-all">Mark all as complete</label>
          {/* 列表组件 */}
          <TodoList
            list={this.state.todos}
            onEditTodo={this.editTodo}
            onDeleteTodo={this.deleteTodo}
            onChangeDone={this.changeDone}
            onChangeEdit={this.changeEdit}
          />
        </section>

        {/* footer 组件 */}
        <TodoFooter
          list={this.state.todos}
          onClearCompletedTodo={this.clearCompletedTodo}
          onSearchAllTodo={this.searchAllTodo}
        />
      </section>
    )
  }
}

export default App
